<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>

    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-container,#app,body,html {
            height: 100%;
        }

        .fruit-title{
            padding-bottom: -60px;
            padding-left: 60px;

        }

        .header-label{
            margin-left: 100px;
        }
        .header-label1{
            margin-left: 195px;
        }
        .header-label2{
            margin-left: 287px;
        }
        .header-label3{
            margin-left: 150px;
        }
        .goodsimg{
            height: 70px;
            padding-left: 30px;
        }

        .f-names{
            text-align: center;
            font-weight: bold;
            margin-top: 1px ;
        }
        .fruit-title{
            padding-top: 20px;
        }

        .goodsprice{
            display: inline-block;
            width: 100px;
           margin-right: 10px;
            padding-left: 0px;
            margin-top: -10px;
            align-self: center;
        }
        .goodsintro{
            display: inline-block;
            width: 320px;
            height: 80px;
            margin-left: 0px;
            align-self: center;
            text-align: center;
            margin-top: 20px;

        }
        .goodstitle{
            display: inline-block;
            width: 280px;
            height: 80px;
            text-align: center;
            margin-left: 20px;
        }
        element.style {
            overflow: hidden;
        }


    </style>
</head>
<body>
<div id="app">


    <el-container>
        <el-header>
            <el-form :inline="true" :model="params" class="demo-form-inline">
                <el-form-item label="书名">
                    <el-input v-model="params.name" placeholder="请输入书名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query()">查询</el-button>
                    <el-button type="primary" @click="insert">新增</el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-table :data="books" tooltip-effect="dark" style="width: 100%">
                <el-table-column
                        prop="id"
                        label="主键">
                </el-table-column>
                <el-table-column prop="img" label="图片">
                    <template v-slot="scope">
                        <img :src="scope.row.pic" alt="" width="90" height="90">
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="书名">
                </el-table-column>
                <el-table-column
                        prop="author"
                        label="作者">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价格">
                </el-table-column>
                <el-table-column
                        prop="addr"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button  type="danger" icon="el-icon-delete" circle @click.prevent="del( scope.row.id)"></el-button>
                        <el-button  type="danger" icon="el-icon-edit"   circle @click.prevent="update( scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>


        </el-main>
       <div  align="center">
           <el-pagination background layout="prev,pager,next"
                          :total="total" @current-change="query" :page-size="7">
           </el-pagination>
       </div>
    </el-container>

    <el-dialog title="图书信息编辑" :visible.sync="dialogFormVisible">
        <el-form :model="editBook">

            <el-form-item label="图片" :label-width="150">
                <el-input v-model="editBook.pic" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="书名" :label-width="150">
                <el-input v-model="editBook.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="作者" :label-width="150">
                <el-input v-model="editBook.author" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="价格" :label-width="150">
                <el-input v-model="editBook.price" autocomplete="off"></el-input>
            </el-form-item>

            <template>
                <el-select v-model="params.id1" placeholder="分类一"  @change="query1(params.id1)">
                    <el-option
                            v-for="item in cate.cate1"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">

                        <span style="float: left">{{ item.id }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
                    </el-option>
                </el-select>
            </template>
            <br>
            <div style="margin: 20px"></div>
            <template>
                <el-select v-model="params.id2" placeholder="分类二" @change="query2(params.id2)" >
                    <el-option
                            v-for="item in cate.cate2"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">

                        <span style="float: left">{{ item.id }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
                    </el-option>
                </el-select>
            </template>
            <br>
            <div style="margin: 20px"></div>
            <template>
                <el-select v-model="params.id3" placeholder="分类三"  >
                    <el-option
                            v-for="item in cate.cate3"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">

                        <span style="float: left">{{ item.id }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
                    </el-option>
                </el-select>
            </template>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>



</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            params:{name:'', id1:'',id2:'',id3:''},
            books:[],
            total:0,
            dialogFormVisible:false,
            editBook:{id:'',pic:'',name:'',author:'',price:''},
            cate:{cate1:[],cate2:[],cate3:[]},




        },
        created(){
            this.query();

            let url="xm-order/xm/crBook/queryCate1";
            axios.get(url).then(res=>{
                this.cate.cate1=res.data;
            });



        },

        methods:{
            query(page){
                page=page || 1;
                let url="xm-order/xm/crBook/queryBackBooks?size=7&page=" + page;
                if(this.params.name){
                    url+="&name=" + this.params.name;
                }

                axios.get(url).then(res=>{
                    this.books=res.data.records;
                    this.total=res.data.total;
                });
            },
            query1(val){
                let url="xm-order/xm/crBook/queryCate2?id=";
                if(val!=null){
                    url+=val;
                }
                axios.get(url,val).then(res=>{
                    this.cate.cate2=res.data;
                });
            },
            query2(val){
                let url="xm-order/xm/crBook/queryCate3?id=";
                if(val!=null){
                    url+=val;
                }
                axios.get(url,val).then(res=>{
                    this.cate.cate3=res.data;
                });
            },
            del(id){
                if(confirm("请确认是否要删除图书？")){
                    axios.get("xm-order/xm/crBook/del?id="+id)
                        .then(res=>{
                            this.$message(res.data.msg);
                            window.location.reload()
                        })
                }

            },
            insert(){
                this.editBook={};
                this.dialogFormVisible = true;
            },
            update(row){
                this.dialogFormVisible = true;
                this.editBook=row;
            },
            save() {
                let url = "xm-order/xm/crBook/save";
                let param = new URLSearchParams();
                param.append("id", this.editBook.pic);
                param.append("pic", this.editBook.pic);
                param.append("name", this.editBook.name);
                param.append("author", this.editBook.author);
                param.append("price", this.editBook.price);
                param.append("category1",this.params.id1);
                param.append("category2",this.params.id2);
                param.append("category3",this.params.id3);
                axios.post(url, param).then(res => {
                    this.$message(res.data.msg);
                    //关闭窗口功能
                    this.dialogFormVisible = false;
                });
            },
        }
    })





</script>
</body>
</html>